<template>
  <div class="my">
    <header>
      <span></span>
      <strong>{{ $t("language.My.name") }}</strong>
      <span @click="$openPage('/kefu')"><NuxtImg src="/img/kefu.png" alt="" /></span>
    </header>
    <div style="height: 45px; width: 100%"></div>
    <main>
      <div class="top">
        <AppSkeleton :loading="loading">
          <template #ske>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
              ">
              <div style="margin-right: 30px">
                <el-skeleton-item variant="image" style="width: 64px; height: 64px" />
              </div>
              <div style="height: 80px; width: 100%">
                <el-skeleton-item variant="text"
                  style="width: 30%;display: block; height: 13px; margin: 10px 0 0px 0" />
                <el-skeleton-item variant="text"
                  style="width: 30%;display: block; height: 13px; margin: 10px 0 0px 0" />
                <el-skeleton-item variant="text"
                  style="width: 30%;display: block; height: 13px; margin: 10px 0 0px 0" />
              </div>
            </div>
          </template>
          <template #main>
            <div class="head" v-if="hastoken && info">
              <NuxtImg src="/img/avater.png" alt="" />
              <div>
                <p>{{ info.nickName }}</p>
                <strong>ID: {{ info.gameID }}</strong>
                <div>
                  <NuxtImg src="/img/my.png" alt="" />
                  <span>VIP{{ vip.currentRank }}</span>
                </div>
              </div>
            </div>
            <div class="nologin" v-else>
              <NuxtImg src="/img/nologin.png" alt="" />
              <div>
                <span>{{ $t("language.My.nologintext") }}</span>
                <el-button @click="opendialog" class="login">{{
        $t("language.My.nologinbtn")
      }}</el-button>
              </div>
            </div>
          </template>
        </AppSkeleton>
        <AppSkeleton :loading="loading">
          <template #ske>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
              ">
              <el-skeleton-item variant="text" style="width: 50%; height: 30px; margin: 10px 0 10px 0" />
            </div>
          </template>
          <template #main>
            <div class="select" v-if="hastoken && coinType">
              <el-dropdown popper-class="dropdown" @command="command" trigger="click">
                <div class="price">
                  <template v-if="coinType == 'BRL'">
                    <div>
                      <NuxtImg src="/img/mylrft.png" alt="" />
                      <span>R$ {{ $dot(coininfo[coinType.toString().toLowerCase()]?.totalCoins) }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <div>
                      <NuxtImg src="/img/t1.png" alt="" />
                      <span>USDT{{ $dot(coininfo[coinType.toString().toLowerCase()]?.totalCoins) }}</span>
                    </div>
                  </template>
                  <el-icon style="color: #fff;" color="#fff" size="18">
                    <Plus />
                  </el-icon>
                </div>
                <template #dropdown>
                  <div class="tipsdropdown">
                    <span>{{ $t("language.My.selectTips") }}</span>
                    <el-icon @click="openSelectdialogs">
                      <QuestionFilled />
                    </el-icon>
                  </div>
                  <el-dropdown-menu class="dropdown">
                    <el-dropdown-item command="BRL">
                      <div class="itemdropdown" :class="coinType == 'BRL' ? 'activedown' : ''">
                        <NuxtImg src="/img/mylrft.png" alt="" />
                        <strong>BRL</strong>
                        <div>{{ $dot(coininfo['brl']['totalCoins']) }}</div>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="USDT">
                      <div class="itemdropdown" :class="coinType == 'USDT' ? 'activedown' : ''">
                        <NuxtImg src="/img/t1.png" alt="" />
                        <strong>USDT</strong>
                        <div>{{ $dot(coininfo['usdt']['totalCoins']) }}</div>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </AppSkeleton>

        <dl class="btnlist">
          <dd @click.stop="$openPage(item.path)" v-for="(item, index) in btnimg" :key="index">
            <AppSkeleton :loading="loading">
              <template #ske>
                <div style="
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 10px;
                  ">
                  <el-skeleton-item variant="image" style="width: 100%; width: 36px; height: 27px" />
                  <el-skeleton-item variant="text" style="width: 80%; height: 13px; margin: 10px 0 0px 0" />
                </div>
              </template>
              <template #main>
                <NuxtImg :src="item.img" alt="" />
                <span>{{ $t(item.lang) }}</span>
              </template>
            </AppSkeleton>
          </dd>
        </dl>
        <div class="text">
          <AppSkeleton :loading="loading">
            <template #ske>
              <div style="
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                ">
                <el-skeleton-item variant="text" style="
                    width: 30%;
                    display: block;
                    height: 13px;
                    margin: 0px 0 0px 0;
                  " />
                <el-skeleton-item variant="text" style="
                    width: 40%;
                    display: block;
                    height: 13px;
                    margin: 10px 0 0px 0;
                  " />
                <el-skeleton-item variant="text" style="
                    width: 90%;
                    display: block;
                    height: 13px;
                    margin: 10px 0 0px 0;
                  " />
              </div>
            </template>
            <template #main>
              <p>{{ $t("language.My.text1") }}</p>
              <!-- <strong></strong> -->
              <el-progress :text-inside="true" :show-text="false" color="#fff" :stroke-width="15" :percentage="50" />
              <div>
                <p>{{ $t("language.My.text2") }}</p>
                <el-icon @click="opennotice">
                  <QuestionFilled color="#b5bac8" />
                </el-icon>
              </div>
            </template>
          </AppSkeleton>
        </div>
      </div>
      <AppSkeleton :loading="loading">
        <template #ske>
          <div style="
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              padding: 20px;
            ">
            <el-skeleton-item variant="text" style="
                width: 40%;
                display: block;
                height: 30px;
                margin: 0px 0 0px 0;
              " />
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 20px;
              ">
              <el-skeleton-item variant="image"
                style="width: 20px; height: 20px; margin-right: 15px" /><el-skeleton-item variant="text" style="
                  width: 100%;
                  display: block;
                  height: 30px;
                  margin: 0px 0 0px 0;
                " />
            </div>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 15px;
              ">
              <el-skeleton-item variant="image"
                style="width: 20px; height: 20px; margin-right: 15px" /><el-skeleton-item variant="text" style="
                  width: 100%;
                  display: block;
                  height: 30px;
                  margin: 0px 0 0px 0;
                " />
            </div>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 15px;
              ">
              <el-skeleton-item variant="image"
                style="width: 20px; height: 20px; margin-right: 15px" /><el-skeleton-item variant="text" style="
                  width: 100%;
                  display: block;
                  height: 30px;
                  margin: 0px 0 0px 0;
                " />
            </div>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 15px;
              ">
              <el-skeleton-item variant="image"
                style="width: 20px; height: 20px; margin-right: 15px" /><el-skeleton-item variant="text" style="
                  width: 100%;
                  display: block;
                  height: 30px;
                  margin: 0px 0 0px 0;
                " />
            </div>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 15px;
              ">
              <el-skeleton-item variant="image"
                style="width: 20px; height: 20px; margin-right: 15px" /><el-skeleton-item variant="text" style="
                  width: 100%;
                  display: block;
                  height: 30px;
                  margin: 0px 0 0px 0;
                " />
            </div>
            <div style="
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-top: 15px;
              ">
              <el-skeleton-item variant="image" style="width: 20px; height: 20px; margin-right: 15px" />
              <el-skeleton-item variant="text" style="
                  width: 100%;
                  display: block;
                  height: 30px;
                  margin: 0px 0 0px 0;
                " />
            </div>
            <el-skeleton-item variant="text" style="
                width: 15%;
                display: block;
                height: 30px;
                margin: 20px auto;
              " />
          </div>
        </template>
        <template #main>
          <div class="bottom">
            <h3>
              {{ $t("language.My.title") }}
            </h3>
            <dl>
              <dd @click="$openPage('/info')">
                <div>
                  <NuxtImg src="/img/myc1.png" alt="" /><span>{{
        $t("language.My.column1")
      }}</span>
                </div>
                <el-icon color="#fff" size="14">
                  <ArrowRightBold />
                </el-icon>
              </dd>
              <dd @click="$openPage('/tran')">
                <div>
                  <NuxtImg src="/img/myc2.png" alt="" /><span>{{
        $t("language.My.column2")
      }}{{ hastoken }}</span>
                </div>
                <el-icon color="#fff" size="14">
                  <ArrowRightBold />
                </el-icon>
              </dd>
              <dd @click="$openPage('/betting')">
                <div>
                  <NuxtImg src="/img/myc3.png" alt="" /><span>{{
        $t("language.My.column3")
      }}</span>
                </div>
                <el-icon color="#fff" size="14">
                  <ArrowRightBold />
                </el-icon>
              </dd>
              <dd @click="$openPage('/message')">
                <div>
                  <NuxtImg src="/img/myc4.png" alt="" /><span>{{
        $t("language.My.column4")
      }}</span>
                </div>
                <el-icon color="#fff" size="14">
                  <ArrowRightBold />
                </el-icon>
              </dd>
              <dd @click="$openPage('/facebook')">
                <div>
                  <NuxtImg src="/img/myc5.png" alt="" /><span>{{
        $t("language.My.column5")
      }}</span>
                </div>
                <el-icon color="#fff" size="14">
                  <ArrowRightBold />
                </el-icon>
              </dd>
              <dd @click="$openPage('/language')">
                <div>
                  <NuxtImg src="/img/myc6.png" alt="" /><span>{{
        $t("language.My.column6")
                    }}</span>
                </div>
                <div>
                 
                  <strong>{{ lang?.name }}</strong>
                  <el-icon color="#fff" size="14">
                    <ArrowRightBold />
                  </el-icon>

                </div>
              </dd>
            </dl>
          </div>
          <el-button class="btn" v-if="hastoken" @click="logout">{{
            $t("language.My.btn")
            }}</el-button>
        </template>
      </AppSkeleton>
    </main>
    <!-- <notice ref="ntice"></notice>
    <loginhome ref="dialog"></loginhome>
    <selectdialog ref="selectdialogs" /> -->
    <AppNotice ref="ntice" />
    <selectdialog ref="selectdialogs" />
  </div>
</template>
<script lang="ts"></script>
<script setup lang="ts" name="My">
import { QuestionFilled, ArrowRightBold, Plus } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
import {
  reactive,
  ref,
  nextTick,
  onMounted,
  computed,
} from "vue";

const { t } = useI18n();


//获取用户信息
let info: any = computed(() => store.userinfo)
const store = useStore();
//获取金钱信息和金钱类型
let coinType = computed(() => store.cointype)
let coininfo = computed(() => store.coininfo)
// 获取语言信息
let lang:any = computed(() => store.lang)
let loading = ref(false);
//判断是否登录
let hastoken = computed(() => store.token ? true : false);
onMounted(() => {



  // nextTick(() => {
  //   // loading.value = false;
  //   let time = setInterval(() => {
  //     loading.value = false;
  //     clearInterval(time);
  //   }, 500);
  // });
});
let vip:any = reactive({
  currentRank: 0,
  currentVipRecharge: 0,
  id: 1688771,
  nextRank: 1,
  upgradeNeedRecharge: 5000,
})
let  initData=async ()=>{
  if (info.value != null) {
    await nextTick()
    useHttpPOST(`/UserCenter/v1.0/User/Vip`, { id: info.value.gameID }).then(({ data }:{data:any}) => {
      for (let key in data.value.data) {
        vip[key] = data.value.data[key]
      }
    });
    GetUserInfo(info.value).then(({ data }:{data:any}) => {
      if (data.value.code == 0) {
        store.$patch({coininfo:data.value.data.accounts})
        // store.commit('SET_COININFO', data.data.accounts)
        // localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
      }
    })
  }
}
onMounted(()=>{
  initData()
})


let dialog = ref(null);
let opendialog = () => {
  store.$patch({ loginopen: true })
  store.$patch({ loginoreroll: 'login' })
};
let ntice: any = ref(null);
let opennotice = () => {
  ntice.value.open();
};
let selectdialogs: any = ref(null);
let openSelectdialogs = () => {
  console.log(selectdialogs.value, 999);
  selectdialogs.value.open();
};
let command = (val: string) => {
  // money.value = val;
  store.$patch({ cointype: val });

};
let btnimg = reactive([
  {
    img: "/img/my1.png",
    lang: "language.My.card1",
    path: "/wallet",
  },
  {
    img: "/img/my2.png",
    lang: "language.My.card2",
    path: "/rechange",
  },
  {
    img: "/img/my3.png",
    lang: "language.My.card3",
    path: "/withdrawal",
  },
  {
    img: "/img/my4.png",
    lang: "language.My.card4",
    path: "/bonus",
  },
  {
    img: "/img/my5.png",
    lang: "language.My.card5",
    path: "/vip",
  },
]);
// 退出登陆
let logout = () => {
  ElMessage.success({
    message: t("language.commontips.logout"),
    type: "success",
    duration: 1500,
    onClose: () => {
      let store = useStore()
      store.$patch({ userinfo: {} })
      store.$patch({ token: '' })
      store.$patch({ coininfo: {} })
      store.$patch({ cointype: 'BRL' })
    },
  });
};
</script>
<style lang="scss">
.el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: rgb(39, 42, 48) !important;

  strong {
    color: #fff;
  }

  div {
    color: #fff;
  }

}

.dropdown .el-scrollbar__wrap {
  width: 250px !important;
  box-shadow: none !important;
  border: none !important;
  outline: none!important;
}

.dropdown .el-scrollbar,
.dropdown .el-scrollbar__view,
.el-dropdown__list,
.el-dropdown__list,
.el-popper__arrow::before,
.el-popper {
  background-color: rgb(50, 53, 62) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 4px !important;
  outline: none !important;
}

.el-dropdown-menu,
.dropdown {
  background-color: rgb(50, 53, 62) !important;
  box-shadow: none !important;
}

.tipsdropdown {
  font-size: 14px !important;
  color: #b5bac8 !important;
  height: 36px;
  padding: 0px 20px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  .el-icon {
    cursor: pointer;
  }

  span {
    display: block;
    margin-right: 5px;
  }
}

.dropdown .el-dropdown-menu__item {
  border-bottom: 1px solid #4a4c53 !important;
  padding: 8px 20px !important;
  &:focus {
    background-color: rgb(39, 42, 48) !important;

    strong {
      color: #fff !important;
    }

    div {
      color: #fff !important;
    }
  }
  &:hover {
    background-color: rgb(39, 42, 48) !important;

    strong {
      color: #fff !important;
    }

    div {
      color: #fff !important;
    }
  }
  
}

.itemdropdown {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  
 
  img {
    width: 30px !important;
    margin-right: 5px;
  }

  strong {
    font-size: 18px;
    font-weight: normal;
    color: #b5bac8;
    display: block;
    flex: 1;
  }

  >div {
    display: block !important;
    width: 60%;
    text-align: right !important;
    color: #b5bac8;
  }
}

.activedown {
  strong {
    color: #fff !important;
  }

  >div {
    color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
.el-icon {
  color: #fff !important;
}

.my {
  width: 100%;
  overflow: hidden;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  main {
    padding: 0 0 60px;
    width: 100vw;
    box-sizing: border-box;

    .top {
      border-bottom: 2px solid rgb(87, 87, 87);
      width: 100%;
      padding: 10px 20px;

      .head {
        @include flex(row, flex-start, center);

        >img {
          width: 64px;
          margin-right: 40px;
          border-radius: 32px;
        }

        >div {
          p {
            font-size: 14px;
            color: #fff;
          }

          strong {
            font-size: 14px;
            color: #fff;
          }

          div {
            width: 71px;
            height: 18px;
            margin-top: 5px;
            @include flex(row, flex-start, center);
            background-color: #fff;

            border-radius: 9px;

            img {
              width: 28px;
              height: 24px;
              margin-left: -10px;
            }
          }
        }
      }

      .nologin {
        @include flex(row, flex-start, center);
        margin-bottom: 15px;

        >img {
          width: 64px;
          margin-right: 40px;
          border-radius: 32px;
          border: 2px solid #0a906c;
          margin-right: 10px;
        }

        >div {
          span {
            display: block;
            font-size: 15px;
            margin-bottom: 12px;
            color: #fff;
          }

          .login {
            color: #fff;
            background: #0a906c;
            border: none;
            font-size: 14px;
            width: 120px;
            height: 26px;
          }
        }
      }

      .price {
        width: 212px;
        height: 36px;
        margin: 13px 0;
        outline: none;
        border: 1px solid #4a4c53;
        border-radius: 5px;
        @include flex(row, space-between, center);
        padding: 0 10px;

        div {
          @include flex(row, flex-start, center);

          img {
            width: 26px;
            margin-right: 5px;
          }

          span {
            font-size: 18px;
            color: #fff;
          }
        }
      }

      .btnlist {
        width: 100%;
        @include flex(row, space-between, center);
        cursor: pointer;

        dd {
          @include flex(column, center, center);
          flex: 1;

          img {
            width: 36px;
          }

          span {
            font-size: 12px;
            color: #fff;
            display: block;
            margin-top: 4px;
          }
        }
      }

      .text {
        margin-top: 12px;

        p {
          font-size: 12px;
          color: #fff;
        }

        .el-icon {
          cursor: pointer;
        }

        .el-progress {
          width: 70%;
          border-radius: 7.5px;
        }

        :deep(.el-progress-bar__inner) {
          background: rgb(0, 144, 109) !important;
        }

        strong {
          display: block;
          margin: 5px 0;
          width: 60%;
          background-color: #fff;
          height: 15px;
          border-radius: 7.5px;
        }

        div {
          @include flex(row, space-between, center);

          p {
            margin-right: 15px;
          }
        }
      }
    }

    .bottom {
      background-color: #1a1a1a;
      padding: 0 20px;

      h3 {
        font-size: 19px;
        color: #fff;
        margin: 19px 0;
      }

      dl {
        dd {
          border-bottom: 1px solid hsla(0, 0%, 75.7%, 0.36470588235294116);
          padding-bottom: 8px;
          cursor: pointer;
          @include flex(row, space-between, center);
          margin-top: 10px;
          height: 35px;

          div {
            @include flex(row, flex-start, center);

            img {
              width: 20px;
              margin-right: 15px;
            }

            span {
              font-size: 16px;
              color: #fff;
            }

            strong {
              font-weight: normal;
              font-size: 16px;
              color: #b5bac8;
              display: block;
              margin-right: 8px;
            }
          }
        }
      }
    }

    .btn {
      height: 40px;
      display: block;
      background-color: #0a906c;
      border-radius: 5px;
      border: none;
      padding: 0 20px;
      margin: 0 auto;
      font-size: 14px;
      color: #fff;
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
